<template>
  <div class="home">
    <div class="top">
      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in swiper" :key="index">
          <img :src="item.picUrl" alt="" class="imgs" />
        </van-swipe-item>
      </van-swipe>
      <!-- 图文 -->
      <tw />

      <!-- 精选专题 -->
      <newslist />

      <!-- 人气推荐 -->
      <renqi />
    </div>
    <!-- 底部 -->

  </div>
</template>
<script>
import tw from "../components/tw/tw";
import newslist from "../components/newslist/newslist";
import renqi from "../components/renqi/renqi";
export default {
  components: {
    tw,
    newslist,
    renqi,
  },
  data() {
    return {
      swiper: [],
    };
  },
  mounted() {
    this.$APL.Banner().then((res) => {
      // console.log(res);
      this.swiper = res.data.data;
    });
  },


};
</script>
<style lang="scss">

// .top {
//   width: 100%;
//   height: 90vh;
//   // background: lawngreen;
//   overflow: scroll;
// }
// .bottom {
//   width: 100%;
//   height: 10vh;
//   display: flex;

//   bottom: 10px;
//   // background: lemonchiffon;
//   align-items: center;
//   justify-content: space-around;
// }
.imgs {
  width: 100%;
  height: 5rem;
  text-align: center;
  background: white;
}
figure {
  width: 25%;
  text-align: center;
  img {
    width: 0.5rem;
  }
}
figure:hover {
  color: rgb(238, 107, 107);
}
</style>


